<script lang="tsx" setup>
import {convertEnumToList, definePageModel, PageModel} from "../index.ts";
import APIS from "@/apis";
import {ref} from "vue";
import {SaleStatus} from "@/pages/develop-project/develop-project-sales/index.ts";
import {ElMessage} from "element-plus";

/**
 * 页面模型
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: APIS.DEVELOP_PROJECT_SALES_BASE,
  extendButton: {
    export: true,
    tableConfig: true,
    fullScreen: true
  },
  tabsForm: {
    els: [
      {
        label: "tab1",
        value: {
          status: 1
        },
        total: 100
      },
      {
        label: "tab2",
        value: {
          status: 2
        }
      },
      {
        label: "tab3",
        value: {
          status: 3
        }
      }
    ]
  },
  searchForm: {
    beforeSubmit(formData) {
      return formData
    },
    els: [
      {
        eType: "el-input",
        prop: "code",
        props: {
          placeholder: "输入框",
          clearable: true
        }
      },
      {
        eType: "el-select",
        prop: "saleStatus",
        props: {
          placeholder: "下拉框",
          clearable: true
        },
        optionsData: {
          list: convertEnumToList(SaleStatus),
          label: "label",
          value: "value"
        }
      },
      {
        eType: "el-date-picker",
        prop: "startTime",
        props: {
          valueFormat: "YYYY-MM-DD",
          placeholder: "时间",
          clearable: true
        }
      },
      {
        eType: "el-cascader",
        prop: "cascaderTest",
        props: {
          placeholder: "级联选择器",
          clearable: true,
          options: [
            {
              value: 'guide',
              label: 'Guide',
              children: [
                {
                  value: 'disciplines',
                  label: 'Disciplines',
                  children: [
                    {
                      value: 'consistency',
                      label: 'Consistency'
                    },
                    {
                      value: 'feedback',
                      label: 'Feedback'
                    }
                  ]
                }
              ]
            },
            {
              value: 'resource',
              label: 'Resources',
              children: [
                {
                  value: 'component',
                  label: 'Component'
                },
                {
                  value: 'template',
                  label: 'Template'
                }
              ]
            }
          ]
        }
      },
      {
        eType: "el-input-tag",
        prop: "inputTagTest",
        props: {
          placeholder: "标签输入框"
        }
      },
      {
        eType: "el-time-picker",
        prop: "timeTest",
        props: {
          placeholder: "时间选择器",
          clearable: true
        }
      }
    ]
  },
  programForm: {
    els: [
      {
        label: "弹窗表格",
        eType: "el-button",
        event: "dialog-table",
        props: {
          type: "primary"
        }
      },
      {
        label: "侧拉表格",
        eType: "el-button",
        event: "side-table",
        props: {
          type: "primary"
        }
      },
      {
        label: "弹窗表单",
        eType: "el-button",
        event: "dialog-sheet",
        props: {
          type: "primary"
        }
      },
      {
        label: "侧拉表单",
        eType: "el-button",
        event: "side-sheet",
        props: {
          type: "primary"
        }
      },
      {
        label: "primary",
        eType: "el-button",
        props: {
          type: "primary",
        },
        event: "primary"
      },
      {
        label: "warning",
        eType: "el-button",
        props: {
          type: "warning"
        },
        event: "warning"
      },
      {
        label: "danger",
        eType: "el-button",
        props: {
          type: "danger"
        },
        event: "danger"
      },
      {
        label: "info",
        eType: "el-button",
        props: {
          type: "info"
        },
        event: "info"
      },
      {
        label: "white",
        eType: "el-button",
        event: "white"
      },
      {
        label: "disabled",
        eType: "el-button",
        isDisable() {
          return true
        },
        event: "disabled"
      },
      {
        label: "hide",
        eType: "el-button",
        isShow() {
          return false
        },
        event: "disabled"
      }
    ]
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    selection: true,
    operation: {
      width: 240,
      props: {
        fixed: "right"
      },
      els: [
        {
          eType: "el-button",
          label: "项目金额",
          event: "project-amount",
          props: {
            type: "primary",
            link: true
          }
        },
        {
          eType: "el-button",
          label: "下定项目",
          event: "commit-project",
          props: {
            type: "primary",
            link: true
          }
        },
        {
          eType: "el-button",
          label: "付款",
          event: "payment",
          props: {
            type: "primary",
            link: true
          }
        },
        {
          eType: "el-button",
          label: "编辑",
          event: "edit",
          props: {
            type: "primary",
            link: true
          }
        },
        {
          eType: "el-button",
          label: "删除",
          event: "delete",
          props: {
            type: "primary",
            link: true
          }
        },
      ]
    },
    props: {
      stripe: true,
      border: true
    },
    els: [
      {
        label: "项目编码",
        prop: "projectCode",
        minWidth: 120
      },
      {
        label: "项目名称",
        prop: "projectName",
        minWidth: 120
      },
      {
        label: "销售人员姓名",
        prop: "saleStaffName",
        minWidth: 120
      },
      {
        label: "销售状态",
        prop: "saleStatus",
        minWidth: 120,
        renderFn(data) {
          return <span>{SaleStatus[data.saleStatus]}</span>
        },
      },
      {
        label: "备注",
        prop: "remark",
        minWidth: 120
      },
      {
        label: "创建人姓名",
        prop: "createStaffName",
        minWidth: 120
      },
      {
        label: "已付金额",
        prop: "payAmount",
        minWidth: 120
      },
      {
        label: "总金额",
        prop: "totalAmount",
        minWidth: 120
      },
      {
        label: "创建时间",
        prop: "createTime",
        minWidth: 140,
        renderFn(data) {
          return <span>{data.createTime?.toDate()}</span>
        },
      }
    ]
  },
  form: {
    title: "弹窗表单",
    width: 700,
    sheetForm: {
      labelWidth: "110px",
      initValue: {
        imageListTest: "https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0,https://pic3.zhimg.com/v2-0e1b3d4ae21fdc5697de4b3dfeee9438_r.jpg",
        imageFormTest: "/跑分（1）.png"
      },
      els: [
        {
          label: "输入框",
          eType: "el-input",
          prop: "code",
          props: {
            placeholder: "输入框",
            clearable: true,
          },
          span: 12,
          tabName: "输入类",
          sectionName: "输入框"
        },
        {
          label: "下拉框",
          eType: "el-select",
          prop: "saleStatus",
          props: {
            placeholder: "下拉框",
            clearable: true
          },
          optionsData: {
            list: convertEnumToList(SaleStatus),
            label: "label",
            value: "value"
          },
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "时间",
          eType: "el-date-picker",
          prop: "startTime",
          props: {
            valueFormat: "YYYY-MM-DD",
            placeholder: "时间",
            clearable: true
          },
          span: 12,
          tabName: "选择类",
          sectionName: "日期类"
        },
        {
          label: "级联选择器",
          eType: "el-cascader",
          prop: "cascaderTest",
          props: {
            placeholder: "级联选择器",
            clearable: true,
            options: [
              {
                value: 'guide',
                label: 'Guide',
                children: [
                  {
                    value: 'disciplines',
                    label: 'Disciplines',
                    children: [
                      {
                        value: 'consistency',
                        label: 'Consistency'
                      },
                      {
                        value: 'feedback',
                        label: 'Feedback'
                      }
                    ]
                  }
                ]
              },
              {
                value: 'resource',
                label: 'Resources',
                children: [
                  {
                    value: 'component',
                    label: 'Component'
                  },
                  {
                    value: 'template',
                    label: 'Template'
                  }
                ]
              }
            ]
          },
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "标签输入框",
          eType: "el-input-tag",
          prop: "inputTagTest",
          props: {
            placeholder: "标签输入框"
          },
          span: 12,
          tabName: "输入类",
          sectionName: "输入框"
        },
        {
          label: "时间选择器",
          eType: "el-time-picker",
          prop: "timeTest",
          props: {
            valueFormat: "HH:mm:ss",
            placeholder: "时间选择器",
            clearable: true
          },
          span: 12,
          tabName: "选择类",
          sectionName: "日期类"
        },
        {
          label: "上传文件",
          eType: "el-upload",
          prop: "uploadTest",
          props: {
            action: "/api/upload",
            multiple: true
          },
          span: 12,
          tabName: "附件类",
          sectionName: "文件类"
        },
        {
          label: "复选框",
          eType: "el-checkbox-group",
          prop: "checkboxTest",
          optionsData: {
            list: [
              {label: "选项1", value: "1"},
              {label: "选项2", value: "2"},
              {label: "选项3", value: "3"}
            ],
            label: "label",
            value: "value"
          },
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "单选框",
          eType: "el-radio-group",
          prop: "radioTest",
          optionsData: {
            list: [
              {label: "选项A", value: "A"},
              {label: "选项B", value: "B"},
              {label: "选项C", value: "C"}
            ],
            label: "label",
            value: "value"
          },
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "开关",
          eType: "el-switch",
          prop: "switchTest",
          span: 12,
          tabName: "输入类",
          sectionName: "开关类"
        },
        {
          label: "滑块",
          eType: "el-slider",
          prop: "sliderTest",
          props: {
            min: 0,
            max: 100
          },
          span: 12,
          tabName: "输入类",
          sectionName: "滑动类"
        },
        {
          label: "评分",
          eType: "el-rate",
          prop: "rateTest",
          span: 12,
          tabName: "输入类",
          sectionName: "评分类"
        },
        {
          label: "颜色选择器",
          eType: "el-color-picker",
          prop: "colorTest",
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "单个复选框",
          eType: "el-checkbox",
          prop: "singleCheckbox",
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "单个单选框",
          eType: "el-radio",
          prop: "singleRadio",
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "图片组件",
          eType: "yy-image-list",
          prop: "imageListTest",
          span: 12,
          tabName: "上传类",
          sectionName: "图片类"
        },
        {
          label: "图片组件",
          eType: "yy-img-upload",
          prop: "imgUploadTest",
          span: 12,
          tabName: "上传类",
          sectionName: "图片类"
        },
        {
          label: "表单图片",
          eType: "yy-image-form",
          prop: "imageFormTest",
          span: 12,
          tabName: "上传类",
          sectionName: "图片类"
        },
      ]
    }
  },
  sideForm: {
    title: "侧拉表单",
    width: 700,
    sheetForm: {
      labelWidth: "110px",
      initValue: {
        imageListTest: "https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0,https://pic3.zhimg.com/v2-0e1b3d4ae21fdc5697de4b3dfeee9438_r.jpg",
        imageFormTest: "/跑分（1）.png"
      },
      els: [
        {
          label: "输入框",
          eType: "el-input",
          prop: "code",
          props: {
            placeholder: "输入框",
            clearable: true,
          },
          span: 12,
          tabName: "输入类",
          sectionName: "输入框"
        },
        {
          label: "下拉框",
          eType: "el-select",
          prop: "saleStatus",
          props: {
            placeholder: "下拉框",
            clearable: true
          },
          optionsData: {
            list: convertEnumToList(SaleStatus),
            label: "label",
            value: "value"
          },
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "时间",
          eType: "el-date-picker",
          prop: "startTime",
          props: {
            valueFormat: "YYYY-MM-DD",
            placeholder: "时间",
            clearable: true
          },
          span: 12,
          tabName: "选择类",
          sectionName: "日期类"
        },
        {
          label: "级联选择器",
          eType: "el-cascader",
          prop: "cascaderTest",
          props: {
            placeholder: "级联选择器",
            clearable: true,
            options: [
              {
                value: 'guide',
                label: 'Guide',
                children: [
                  {
                    value: 'disciplines',
                    label: 'Disciplines',
                    children: [
                      {
                        value: 'consistency',
                        label: 'Consistency'
                      },
                      {
                        value: 'feedback',
                        label: 'Feedback'
                      }
                    ]
                  }
                ]
              },
              {
                value: 'resource',
                label: 'Resources',
                children: [
                  {
                    value: 'component',
                    label: 'Component'
                  },
                  {
                    value: 'template',
                    label: 'Template'
                  }
                ]
              }
            ]
          },
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "标签输入框",
          eType: "el-input-tag",
          prop: "inputTagTest",
          props: {
            placeholder: "标签输入框"
          },
          span: 12,
          tabName: "输入类",
          sectionName: "输入框"
        },
        {
          label: "时间选择器",
          eType: "el-time-picker",
          prop: "timeTest",
          props: {
            valueFormat: "HH:mm:ss",
            placeholder: "时间选择器",
            clearable: true
          },
          span: 12,
          tabName: "选择类",
          sectionName: "日期类"
        },
        {
          label: "上传文件",
          eType: "el-upload",
          prop: "uploadTest",
          props: {
            action: "/api/upload",
            multiple: true
          },
          span: 12,
          tabName: "附件类",
          sectionName: "文件类"
        },
        {
          label: "复选框",
          eType: "el-checkbox-group",
          prop: "checkboxTest",
          optionsData: {
            list: [
              {label: "选项1", value: "1"},
              {label: "选项2", value: "2"},
              {label: "选项3", value: "3"}
            ],
            label: "label",
            value: "value"
          },
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "单选框",
          eType: "el-radio-group",
          prop: "radioTest",
          optionsData: {
            list: [
              {label: "选项A", value: "A"},
              {label: "选项B", value: "B"},
              {label: "选项C", value: "C"}
            ],
            label: "label",
            value: "value"
          },
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "开关",
          eType: "el-switch",
          prop: "switchTest",
          span: 12,
          tabName: "输入类",
          sectionName: "开关类"
        },
        {
          label: "滑块",
          eType: "el-slider",
          prop: "sliderTest",
          props: {
            min: 0,
            max: 100
          },
          span: 12,
          tabName: "输入类",
          sectionName: "滑动类"
        },
        {
          label: "评分",
          eType: "el-rate",
          prop: "rateTest",
          span: 12,
          tabName: "输入类",
          sectionName: "评分类"
        },
        {
          label: "颜色选择器",
          eType: "el-color-picker",
          prop: "colorTest",
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "单个复选框",
          eType: "el-checkbox",
          prop: "singleCheckbox",
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "单个单选框",
          eType: "el-radio",
          prop: "singleRadio",
          span: 12,
          tabName: "选择类",
          sectionName: "选择类"
        },
        {
          label: "图片组件",
          eType: "yy-image-list",
          prop: "imageListTest",
          span: 12,
          tabName: "上传类",
          sectionName: "图片类"
        },
        {
          label: "图片组件",
          eType: "yy-img-upload",
          prop: "imgUploadTest",
          span: 12,
          tabName: "上传类",
          sectionName: "图片类"
        },
        {
          label: "表单图片",
          eType: "yy-image-form",
          prop: "imageFormTest",
          span: 12,
          tabName: "上传类",
          sectionName: "图片类"
        },
      ]
    }
  }
})

/**
 * 测试
 */
const handlePrimary = () => {
  ElMessage.success("点击了primary")
}

/**
 * 弹窗表单
 */
const handleDialogSheet = () => {
  pageModelRef.value.handleAdd("dialog")
}

/**
 * 侧边表单
 */
const handleSideSheet = () => {
  pageModelRef.value.handleAdd("side")
}

/**
 * 弹窗表格
 */
const handleDialogTable = () => {
  pageModelRef.value.handleAdd("dialog")
}

/**
 * 侧边表格
 */
const handleSideTable = () => {
  pageModelRef.value.handleAdd("side")
}
</script>

<template>
  <div class="page-wrap">
    <PageModel ref="pageModelRef" :PageModel="config" @primary="handlePrimary" @dialog-sheet="handleDialogSheet"
               @side-sheet="handleSideSheet" @dialog-table="handleDialogTable" @side-table="handleSideTable"/>
  </div>
</template>

<style lang="scss" scoped>
.page-wrap {
  height: 100%;
  background-color: #f7f7f7;
}
</style>